<template>
	<!-- ${tableComment}列表 -->
	<div class="table-content">
		<div class="list-search" ref="searchWrap">
			<div class="list-search-left fl">
				<Form
						ref="listParam"
						:model="listParam"
						:label-width="80"
						label-position="right"
				>
					<Row>
						<Col span="7" v-if="this.userInfo.nodeType == 'ENTERPRISE'">
						<FormItem :label="$t('components.busiText.org')">
							<OrgTreeList
									@backorgTree="onOrgTreeChanged"
									:selectedDetect="selectedDetect"
							></OrgTreeList>
						</FormItem>
						</Col>
						<Col span="7" v-if="this.userInfo.nodeType == 'PROJECT'">
						<FormItem :label="$t('components.busiText.org')">
							<Input
									v-model.trim="userInfo.belongName"
									disabled
							></Input>
						</FormItem>
						</Col>
						<Col span="7">
						<FormItem :label="$t('components.busiText.project')">
							<ProjectSelect
									:projectStatus="listParam.orgId"
									@backprojectStatus="onProjectSelected"
									:selectedDetect="selectedDetect"
							></ProjectSelect>
						</FormItem>
						</Col>
                        <#list columnList as column>
                        <#if column.query>
						<#if !"customer_id,enterprise_id,full_index,full_index_all,project_id"?split(",")?seq_contains(column.columnName)>
						<Col span="7">
						<FormItem :label="$t('${className}.search.${column.attrName}')">
							<#if column.formType == 'text' || column.formType == 'textarea' || column.formType == 'editor'>
								<Input
										v-model.trim="listParam.${column.attrName}"
										type="text"
										maxlength="100"
										clearable
										:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
								></Input>
							<#elseif column.formType == 'select'>
								<Select
										:clearable="true"
										v-model="listParam.${column.attrName}"
										filterable
										:placeholder="$t('${className}.search.placeholder.${column.attrName}')">
									<Option
											v-for="item in ${column.attrName?replace("Id", "")}List"
											:value="item.id"
											:key="item.id"
									>{{ item.name }}</Option>
								</Select>
							<#elseif column.formType == 'date'>
								<DatePicker
										ref="search${column.attrName}DatePicker"
										:editable="false"
										:value="listParam.${column.attrName}"
										format="yyyy-MM-dd"
										@on-change="(dateStr) => {listParam.${column.attrName} = dateStr;}"
										type="daterange"
										:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
										style="width: 100%"
								></DatePicker>
							<#elseif column.formType == 'datetime'>
								<DatePicker
										ref="search${column.attrName}DatePicker"
										:editable="false"
										:value="listParam.${column.attrName}"
										format="yyyy-MM-dd HH:mm"
										@on-change="(dateStr) => {listParam.${column.attrName} = dateStr;}"
										type="datetimerange"
										:placeholder="$t('${className}.search.placeholder.${column.attrName}')"
										style="width: 100%"
								></DatePicker>
							<#else>
								<!--树形下拉选择-->
								<TreeSelect
										:transfer="transfer"
										v-model="listParam.${column.attrName}"
										:data="${column.attrName?replace("Id", "")}TreeData"
										:load-data="load${column.attrName?replace("Id", "")}TreeData"
										@on-change-object="${column.attrName?replace("Id", "")}TreeDataChange"
								></TreeSelect>
							</#if>
						</FormItem>
						</Col>
						</#if>
						</#if>
						</#list>
					</Row>
				</Form>
			</div>
			<div class="list-search-right fr">
				<Button type="primary" :loading="loading" @click="searchAction"
				><span class="font_family icon-chaxun" v-if="!loading"></span
					>{{ $t("components.uiButton.search") }}</Button
				>
				<Button @click="resetParam"
				><span class="font_family icon-reset"></span
					>{{ $t("components.uiButton.reset") }}</Button
				>
				<a @click="searchMore">
				  <span class="show-button">
					{{
					  isMoreSearch
						? $t("components.uiButton.retract")
						: $t("components.uiButton.unfold")
					}}
					<Icon :type="isMoreSearch ? 'ios-arrow-up' : 'ios-arrow-down'" />
				  </span>
				</a>
			</div>
		</div>

		<div class="list-table">
			<div class="listHeader" ref="listHeader" id="listHeader">
				<!-- 单独的新增按钮 -->
				<span class="btn" @click="addBtnClick">
				  <a href="javascript:void(0)">
					<span class="font_family icon-add1"></span>
					{{ $t("components.uiButton.add") }}
				  </a>
				</span>
				<span class="line"></span>
				<Checkbox v-model="listParam.example">{{ $t("仅作展示") }}</Checkbox>
			</div>
			<Table
					:loading="loading"
					stripe
					:columns="tableColumn"
					:data="tableData"
					:max-height="maxTableHeight"
					row-key="id"
					class="scroll-bar"
			>
                <#list columnList as column>
				<#if column.list>
				<!-- ${column.columnComment} -->
				<template slot-scope="{ row }" slot="${column.attrName}">
					<tooltip-text :tooltipData="row.${column.attrName}"></tooltip-text>
				</template>
				</#if>
                </#list>
				<template slot-scope="{ row }" slot="action">
					<div class="allow-click">
						<!-- 查看详情 -->
						<Button
								type="text"
								size="small"
								class="but-text"
								@click="seeDetail(row, 'detail')"
						>{{ $t("components.uiButton.see") }}</Button
						>
						<Dropdown :transfer="true">
							<a class="action-more-icon">
								<Icon type="ios-arrow-down" />
							</a>
							<DropdownMenu slot="list">
								<!-- 编辑按钮 -->
								<DropdownItem @click.native="seeDetail(row, 'edit')">
									{{ $t("components.uiButton.edit") }}
								</DropdownItem>
								<!-- 删除按钮 -->
								<DropdownItem @click.native="del(row)">
									{{ $t("components.uiButton.delete") }}
								</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</div>
				</template>
			</Table>
			<TablePage
					ref="tablePage"
					:total="page.total"
					@pageChange="onPageChange"
			></TablePage>
		</div>
	</div>
</template>

<script>
    import OrgTreeList from "@/components/common/orgTreelist";
    import ProjectSelect from "@/components/common/projectselect";
    import * as ${className}Api from "@/api/${className}.api";
    import { mapGetters } from "vuex";
    export default {
        name: "${ClassName}List",
        components: {
            OrgTreeList,
            ProjectSelect,
        },
        props: {
            refreshList: {
                type: Boolean,
            },
        },
        data() {
            return {
                page: {                //分页参数
                    total: 0,
                    current: 1,
                    size: this.$pageSize,
                },
                loading: false,       //表格加载状态
                isMoreSearch: false,  //高级搜索展开状态
                selectedDetect: {},   //已选择的组织机构
                listParam: {          //表格搜索条件
                    orgId: "",        //机构id
                    projectId: "",    //项目id
                    <#list columnList as column>
                    <#if column.query>
                    <#if !"customer_id,enterprise_id,full_index,full_index_all,project_id"?split(",")?seq_contains(column.columnName)>
                    ${column.attrName}: "", //${column.columnComment}
					</#if>
					</#if>
					</#list>
                },
                fristIn: 0,           //分页第一次加载
                tableColumn: [
                    {
                        title: this.$t("components.uiText.index"),
                        // type: "index",
                        fixed: "left",
                        width: 75,
                        align: "center",
                        render: (h, params) => {
                            let seriesIdx =
                                params.row._index +
                                1 +
                                this.page.size * this.page.current -
                                this.page.size;
                            return this.$common.backSeriesIdx(h, seriesIdx);
                        },
                    },
                    <#list columnList as column>
                    <#if column.list>
                    //${column.columnComment}
                    {
                        title: this.$t('${className}.table.${column.attrName}'),
                        slot: "${column.attrName}",
                        align: "center",
                        // key: "${column.attrName}",
                        // width: 200,
                    },
                    </#if>
                    </#list>
                    //操作
                    {
                        title: this.$t("components.uiText.operator"),
                        width: 100,
                        align: "center",
                        slot: "action",
                    },
                ],
                tableData: [],
            };
        },
        computed: {
            ...mapGetters(["pid", "userInfo"]),
            maxTableHeight() {
                if (this.isMoreSearch) {
                    return window.innerHeight - 311;
                } else {
                    return window.innerHeight - 267;
                }
            },
        },
        watch: {
            refreshList() {
                this.getTableData({
                    current: this.page.current,
                    size: this.page.size,
                });
            },
        },
        created() {},
        mounted() {
            this.getTableData();
        },
        methods: {
            addBtnClick() {
                this.$emit("openContent", "add", {});
            },
            searchMore() {
                // 查询条件展开/收起
                this.isMoreSearch = !this.isMoreSearch;
            },
            // 获取组织机构
            onOrgTreeChanged(checkedCode) {
                if (!checkedCode.length) return;
                this.listParam.orgId = checkedCode[0].id;
                this.listParam.orgName = checkedCode[0].title;
                if (this.isFirst) {
                    this.getTableData();
                    this.isFirst = false;
                }
            },
            // 获取项目
            onProjectSelected(checkedCode) {
                if (!checkedCode) return;
                this.listParam.projectId = checkedCode.id;
            },
            // 获取表格数据
            getTableData() {
                this.loading = true;
                let orgId = this.listParam.projectId
                    ? this.listParam.projectId
                    : this.listParam.orgId;
                if (!orgId) {
                    orgId = this.pid;
                }
                let params = {
                    page: {
                        current: this.page.current || 1,
                        size: this.page.size || this.$pageSize,
                    },
                    params: {
                        orgId: orgId,
                        // orgName: this.listParam.orgName,
                        <#list columnList as column>
                        <#if column.query>
                        <#if !"customer_id,enterprise_id,full_index,full_index_all,project_id"?split(",")?seq_contains(column.columnName)>
                        ${column.attrName}: this.listParam.${column.attrName}, //${column.columnComment}
                        </#if>
                        </#if>
                        </#list>
                    },
                };
                ${className}Api.get${ClassName}List(params).then((res) => {
                    if (res.code == 200) {
                        this.page.total = Number(res.data.total);
                        this.page.totalPage = Number(res.data.pages);
                        this.tableData = res.data.list;
                    } else {
                        this.$Message.error(res.msg);
                    }
                    this.loading = false;
                    this.fristIn = 0;
                })
				.catch(() => {
                    this.loading = false;
                    this.fristIn = 0;
				});
            },
            //重置
            resetParam() {
                this.$refs.tablePage.restPageFn();
                this.page.current = 1;
                this.page.size = this.$pageSize;
                this.selectedDetect = {};
                <#list columnList as column>
                <#if column.query>
                <#if !"customer_id,enterprise_id,full_index,full_index_all,project_id"?split(",")?seq_contains(column.columnName)>
                this.listParam.${column.attrName} = "";
				</#if>
				</#if>
				</#list>
                <#list columnList as column>
                <#if column.query>
                <#if !"customer_id,enterprise_id,full_index,full_index_all,project_id"?split(",")?seq_contains(column.columnName)>
                <#if column.formType == 'date'>
                this.$refs.search${column.attrName}DatePicker.handleClear(); //自带清空函数
                <#elseif column.formType == 'datetime'>
                this.$refs.search${column.attrName}DatePicker.handleClear(); //自带清空函数
				</#if>
				</#if>
				</#if>
				</#list>
                this.getTableData();
            },
            //搜索
            searchAction() {
                this.$refs.tablePage.restPageFn();
                this.getTableData();
            },
            //切换下一页
            onPageChange(page) {
                if (this.fristIn === 0) {
                    //限制重复点击或者重复调用
                    this.fristIn = 1;
                    //每次请求先清空数据
                    this.tableData = [];
                    this.page.current = page.current;
                    this.page.size = page.size;
                    this.getTableData();
                }
            },
            seeDetail(row, oprType) {
                // 查看详情
                this.$emit("openContent", oprType, JSON.parse(JSON.stringify(row)));
            },
            del(row) {
                // 删除
                this.$Modal.confirm({
                    title: this.$t("components.uiText.tips"),
                    closable: true,
                    content: this.$t("components.uiText.deleteConfirm"),
                    width: 360,
                    onOk: () => {
                        //   删除接口
                        ${className}Api
							.del${ClassName}(row.id)
							.then((res) => {
								if (res.code == 200) {
									this.$Message.success(res.msg);
									if (this.page.current === this.page.totalPage && this.tableData.length === 1) {
										// 在页面的最后一页或页面只有一页，并且当前页面只有一条数据时
										this.page.current -= 1;
										if (!this.page.current) {
											// 防止在只有一页时并且当前页只有一条数据执行删除操作重新把当前页赋值为1
											this.page.current = 1;
										}
									}
									this.getTableData();
								} else {
									this.$Message.error(res.msg);
								}
						})
						.catch(() => {
							this.loading = false;
						});
					},
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .form-content {
		.ivu-input[readonly="readonly"] {
			background: unset;
		}
    }
</style>
